<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广告管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .ad-image {
            max-width: 100px;
            max-height: 60px;
            object-fit: cover;
        }
        .table-container {
            margin-top: 20px;
        }
        .btn-group {
            gap: 5px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-12">
                <h1 class="mb-4">广告管理系统</h1>
                
                <!-- 操作按钮 -->
                <div class="mb-3">
                    <a href="/web/ads/add" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> 添加广告
                    </a>
                    <a href="/web/categories" class="btn btn-secondary">
                        <i class="bi bi-tags"></i> 分类管理
                    </a>
                </div>

                <!-- 广告列表 -->
                <div class="table-container">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">广告列表</h5>
                        </div>
                        <div class="card-body">
                            <div th:if="${message}" class="alert alert-info alert-dismissible fade show" role="alert">
                                <span th:text="${message}"></span>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                            <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
                                <span th:text="${error}"></span>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                            
                            <div th:if="${ads != null and !#lists.isEmpty(ads)}">
                                <table class="table table-striped table-hover">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>ID</th>
                                            <th>广告名称</th>
                                            <th>分类</th>
                                            <th>图片</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="ad : ${ads}">
                                            <td th:text="${ad.id}"></td>
                                            <td th:text="${ad.name}"></td>
                                            <td>
                                                <th:block th:if="${categories != null}">
                                                    <span th:each="category : ${categories}" 
                                                          th:if="${category.id == ad.categoryId}" 
                                                          th:text="${category.type}"></span>
                                                </th:block>
                                                <span th:if="${categories == null or ad.categoryId == null}" class="text-muted">未分类</span>
                                            </td>
                                            <td>
                                                <img th:if="${ad.imageUrl != null and ad.imageUrl != ''}" 
                                                     th:src="${ad.imageUrl}" 
                                                     class="ad-image img-thumbnail" 
                                                     alt="广告图片"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
                                                <span th:unless="${ad.imageUrl != null and ad.imageUrl != ''}" class="text-muted">无图片</span>
                                                <span class="text-muted" style="display: none;">图片加载失败</span>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a th:href="@{/web/ads/edit/{id}(id=${ad.id})}" 
                                                       class="btn btn-sm btn-outline-primary">编辑</a>
                                                    <button type="button" 
                                                            class="btn btn-sm btn-outline-danger"
                                                            th:onclick="'deleteAd(' + ${ad.id} + ')'">删除</button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div th:if="${ads == null or #lists.isEmpty(ads)}" class="text-center py-4">
                                <p class="text-muted">暂无广告数据</p>
                                <a href="/web/ads/add" class="btn btn-primary">添加第一个广告</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 自动消除通知功能
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                setTimeout(function() {
                    if (alert && alert.classList.contains('show')) {
                        const bsAlert = new bootstrap.Alert(alert);
                        bsAlert.close();
                    }
                }, 5000); // 5秒后自动消除
            });
        });

        function deleteAd(id) {
            // 创建确认对话框
            const confirmModal = document.createElement('div');
            confirmModal.className = 'modal fade';
            confirmModal.innerHTML = `
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认删除</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>确定要删除这个广告吗？删除后无法恢复！</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-danger" id="confirmDelete">确定删除</button>
                        </div>
                    </div>
                </div>
            `;
            
            const modal = new bootstrap.Modal(confirmModal);
            modal.show();
            
            document.getElementById('confirmDelete').addEventListener('click', function() {
                modal.hide();
                fetch('/web/ads/delete/' + id, {
                    method: 'POST'
                })
                .then(response => {
                    if (response.ok) {
                        // 显示成功通知
                        showNotification('广告删除成功！', 'success');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showNotification('删除失败，请稍后重试', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('删除失败，请稍后重试', 'danger');
                });
                
                // 清理模态框
                confirmModal.addEventListener('hidden.bs.modal', function() {
                    document.body.removeChild(confirmModal);
                });
            });
        }

        // 显示通知函数
        function showNotification(message, type) {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
            alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            alertDiv.innerHTML = `
                <span>${message}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            document.body.appendChild(alertDiv);
            
            // 5秒后自动消除
            setTimeout(function() {
                if (alertDiv && alertDiv.classList.contains('show')) {
                    const bsAlert = new bootstrap.Alert(alertDiv);
                    bsAlert.close();
                }
            }, 5000);
        }
    </script>
</body>
</html>